import { SpdBgImg } from '../../components/spd-img';
import { Form, Input, Button } from 'antd';
import { observer } from 'mobx-react'
import { store } from '../../store';
import { withRouter } from 'react-router-dom';
import { RouteComponentProps } from 'react-router';
import { parse } from 'query-string';
import { message } from 'antd';
import { useLogin } from './login.logic';
import './login.less';
const layout = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
};
// const tailLayout = {
//     wrapperCol: { offset: 8, span: 16 },
// };


function LoginComponent(props: RouteComponentProps) {
    console.log(props.location)
    let login = useLogin();
    const onFinish = (values: {username: string, password: string}) => {
        login(values.username, values.password).then(({error, result}) => {
            if(error == null) {
                let url = '/';
                let search = parse(props.location.search);
                if(search&&search.to) {
                    // @ts-ignore
                    url = atob(search.to);
                }
                props.history.push(url);
            } else {
                message.error('账户或密码错误！');
            }
        });
    };
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
        // localStore.setCount();
    };
    return <>
                <SpdBgImg defaultSrc="/assets/images/login_dongzhan_bg.small.png" src="/assets/images/login_dongzhan_bg.png" />
                <div className="login-container">
                    <div className="login-box">
                        <img className="login-box-logo" src="/assets/images/platform-logo.svg" alt="" />
                        <div className="login-content">
                            <div className="login-box-title">
                                用户登陆
                            </div>
                            <div className="login-form">
                                <Form {...layout} name="basic" onFinish={onFinish} onFinishFailed={onFinishFailed} >
                                    <Form.Item name="username" rules={[{ required: true, message: '请输入用户名/手机号码' }]} >
                                        <Input placeholder="请输入用户名/手机号码" size="large"/>
                                    </Form.Item>
                                    <Form.Item name="password" rules={[{ required: true, message: '请输入密码' }]} >
                                        <Input type="password" placeholder="密码" size="large"/>
                                    </Form.Item>
                                    <Button htmlType="submit" type="primary" onClick={() => {store.setCount()}}  style={{width: '100%'}} size="large">登陆</Button>
                                </Form>
                            </div>
                        </div>
                    </div>
                </div>
            </>
                
    
}
export default withRouter(observer(LoginComponent))